<template>
  <el-menu :default-active="activeMenu" router unique-opened :class="'menu-left'" text-color="#fff" style="border-right: none !important;">
    <LeftSubMenu :menuData="menuData"></LeftSubMenu>
  </el-menu>
</template>
<script setup>
import LeftSubMenu from "./LeftSubMenu.vue";
import { computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  menuData: {
    type: Array,
    default: [],
  },
});

const activeMenu = computed(() => {

  const { path } = router.currentRoute.value;
  return path;
});

</script>
<style scoped>
.menu-left:deep(.el-menu),
.menu-left:deep(.el-sub-menu__title:hover) {
  background: none;
}

.menu-left:deep(.el-menu-item),
.menu-left:deep(.el-sub-menu__title) {
  height: 60px;
  margin-bottom: 4px;
  border-radius: 4px;
  color: var(--text-main-color) !important;
}

.menu-left:deep(.el-menu-item:hover .icon),
.menu-left:deep(.el-menu-item.is-active .icon) {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

.menu-left:deep(.el-menu-item:hover),
.menu-left:deep(.el-menu-item.is-active) {
  color: #ffffff !important;
  background-color: #243158;
}
</style>